<template>
  <div class="layer_box">
    <a @click="goTop" v-show="isShowGoTop" class="gotop_btn" title="回到顶部" href="javascript:void(0);">回到顶部</a>
    <!--<a class="suggest_btn" target="_blank" href="http://www.huim.com/contents/feedback/">意见反馈</a>-->
  </div>
</template>
<script>
  export default {
    props: {
      isShowGoTop: {
        type: Boolean,
        default: false,
      }
    },
    methods: {
      goTop() {
       // console.log(window.requestAnimationFrame);
        if (this.isShowGoTop) {
          //document.documentElement.scrollTop = 0;
          this.gotoTop(4);
        }
      },
      //平滑返回顶部
      gotoTop(rate) {

        if (!window.requestAnimationFrame) {
          requestAnimationFrame = function (fn) {
            setTimeout(fn, 17);
          };
        }

        let doc = document.body.scrollTop ? document.body : document.documentElement;
        let scrollTop = doc.scrollTop;
        let top = function () {
          scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);
          if (scrollTop < 1) {
            doc.scrollTop = 0;
            return false;
          }
          doc.scrollTop = scrollTop;
          stop = requestAnimationFrame(top);
        };
        top();
      }
    }
  }
</script>
<style lang="less" scoped>
  .layer_box {
    cursor: pointer;
    position: fixed;
    left: 50%;
    margin-left: 570px;
    bottom: 80px;
    _position: absolute;
    _bottom: auto;
    z-index: 120;
    a.gotop_btn {
      display: block;
      width: 50px;
      height: 50px;
      text-indent: -99em;
      overflow: hidden;
      background: url(https://i.huim.com/content_new/images/top_ico.png) no-repeat;
      color: #fff;
      text-decoration: none;
      &:hover {
        background-position: 0 -50px;
      }
    }
  }
</style>
